<template>
  <div class="home">
    <!-- 英雄区域 -->
    <section class="hero">
      <div class="hero-background">
        <div class="hero-overlay"></div>
      </div>
      <div class="hero-content container">
        <div class="hero-text">
          <h1 class="hero-title">🍕 发现美食的无限可能</h1>
          <p class="hero-subtitle">探索各地特色美食，品味生活的美好时光</p>
          <div class="hero-actions">
            <el-button type="primary" size="large" class="hero-btn" @click="exploreFood">
              <span>浏览菜品</span>
            </el-button>
            <el-button size="large" class="hero-btn secondary" @click="goToCategories">
              <span>菜品分类</span>
            </el-button>
          </div>
        </div>
        <div class="hero-stats">
          <div class="stat-item">
            <div class="stat-number">5+</div>
            <div class="stat-label">精选美食</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">2+</div>
            <div class="stat-label">优质商家</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">8</div>
            <div class="stat-label">美食分类</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 特色功能区域 -->
    <section class="features">
      <div class="container">
        <div class="features-grid grid grid-3">
          <div class="feature-card">
            <div class="feature-icon">🍽️</div>
            <h3>精选美食</h3>
            <p>汇聚全球各地特色美食，满足您的味蕾需求</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">🚚</div>
            <h3>快速配送</h3>
            <p>30分钟内送达，热腾腾的美食直达您的餐桌</p>
          </div>
          <div class="feature-card">
            <div class="feature-icon">⭐</div>
            <h3>品质保证</h3>
            <p>严选优质商家，确保每一份美食的品质和安全</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 美食分类 -->
    <section class="categories">
      <div class="container">
        <div class="section-header">
          <h2>🍜 美食分类</h2>
          <p>发现您喜爱的美食类型</p>
        </div>
        <div class="category-grid grid grid-4">
          <div 
            v-for="category in mockCategories" 
            :key="category.id"
            class="category-card"
            @click="goToCategory(category.id)"
          >
            <div class="category-icon">{{ category.icon }}</div>
            <h3>{{ category.name }}</h3>
            <p>{{ category.count }}+ 道菜品</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门推荐 -->
    <section class="popular-section">
      <div class="container">
        <div class="section-header">
          <h2>🔥 热门推荐</h2>
          <p>为您精选最受欢迎的美味佳肴</p>
        </div>
        <div class="popular-grid grid grid-3">
          <div v-if="popularLoading" class="loading-container">
            <p>正在加载热门推荐...</p>
          </div>
          <div 
            v-else
            v-for="food in popularFoods" 
            :key="food.id"
            class="food-card"
            @click="goToFoodDetail(food.id)"
          >
            <div class="food-image-container">
              <img :src="food.image" :alt="food.name" class="food-image">
              <div class="food-overlay">
                <div class="food-category">
                  <span>{{ food.category }}</span>
                </div>
              </div>
            </div>
            <div class="food-info">
              <h3>{{ food.name }}</h3>
              <p class="food-description">{{ food.description }}</p>
              <div class="food-rating-section">
                <div class="rating-stars">
                  <span v-for="i in Math.floor(food.rating)" :key="i" class="star filled">⭐</span>
                  <span v-if="food.rating % 1 !== 0" class="star half">⭐</span>
                  <span v-for="i in (5 - Math.ceil(food.rating))" :key="'empty-' + i" class="star empty">☆</span>
                  <span class="rating-text">{{ food.rating }}/5</span>
                </div>
                <div class="review-count">{{ food.reviewCount }}条评价</div>
              </div>
              <div class="food-meta">
                <div class="food-price">¥{{ food.price }}</div>
                <span class="merchant">{{ food.merchant }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="section-footer">
          <el-button type="primary" size="large" @click="exploreFood">
            查看更多美食 →
          </el-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      loading: false,
      mockCategories: [
        { id: 1, name: '川菜', icon: '🌶️', count: 3, description: '四川菜系，以麻辣鲜香著称' },
        { id: 2, name: '粤菜', icon: '🦐', count: 2, description: '广东菜系，清淡鲜美' },
        { id: 3, name: '湘菜', icon: '🥘', count: 0, description: '湖南菜系，香辣可口' },
        { id: 4, name: '鲁菜', icon: '🐟', count: 0, description: '山东菜系，口味醇厚' },
        { id: 5, name: '江浙菜', icon: '🦀', count: 0, description: '江浙菜系，清香甜美' },
        { id: 6, name: '西餐', icon: '🍕', count: 0, description: '西式料理，异域风情' },
        { id: 7, name: '日韩料理', icon: '🍣', count: 0, description: '日韩风味，精致美味' },
        { id: 8, name: '东南亚菜', icon: '🍜', count: 0, description: '东南亚风味，酸辣开胃' }
      ],
      popularFoods: [],
      popularLoading: false
    }
  },
  async mounted() {
    await this.loadPopularFoods()
  },
  methods: {
    async loadPopularFoods() {
      this.popularLoading = true
      try {
        const response = await fetch('http://localhost:2077/api/public/popular-foods?limit=6')
        if (response.ok) {
          const data = await response.json()
          if (data.success) {
            this.popularFoods = data.data
          } else {
            console.error('获取热门推荐失败:', data.message)
          }
        }
      } catch (error) {
        console.error('获取热门推荐失败:', error)
      } finally {
        this.popularLoading = false
      }
    },
    exploreFood() {
      this.$router.push('/popular')
    },
    goToCategories() {
      this.$router.push('/categories')
    },
    goToCategory(categoryId) {
      this.$router.push(`/category/${categoryId}`)
    },
    goToFoodDetail(foodId) {
      this.$router.push(`/food/${foodId}`)
    }
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
}

/* 英雄区域 */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  color: white;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-accent);
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.hero-text {
  text-align: left;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
  color: white !important;
  -webkit-text-fill-color: white !important;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-xl);
  opacity: 0.95;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.hero-btn {
  padding: 16px 32px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-xl) !important;
  transition: all 0.3s ease !important;
  min-width: 160px;
}

.hero-btn.secondary {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  backdrop-filter: blur(10px);
}

.hero-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: var(--spacing-xs);
  background: var(--gradient-secondary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* 特色功能 */
.features {
  padding: var(--spacing-xl) 0;
  background: var(--background-primary);
}

.features-grid {
  margin-top: var(--spacing-lg);
}

.feature-card {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--background-accent);
  border-radius: var(--radius-xl);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  display: block;
}

.feature-card h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 1.25rem;
}

.feature-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 通用section样式 */
.categories, .popular-section {
  padding: var(--spacing-xl) 0;
}

.categories {
  background: var(--background-secondary);
}

.popular-section {
  background: var(--background-primary);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.section-header p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0;
}

/* 分类卡片 */
.category-card {
  background: var(--background-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1;
}

.category-card:hover::before {
  left: 0;
  opacity: 0.1;
}

.category-card:hover {
  transform: translateY(-12px) scale(1.05);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-xl);
}

.category-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  position: relative;
  z-index: 2;
}

.category-card h3 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  font-size: 1.25rem;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.category-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* 美食卡片 */
.food-card {
  background: var(--background-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

.food-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-xl);
}

.food-image-container {
  position: relative;
  overflow: hidden;
}

.food-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.food-card:hover .food-image {
  transform: scale(1.1);
}

.food-overlay {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
}

.food-category {
  background: var(--gradient-secondary);
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius-xl);
  font-size: 0.85rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.food-info {
  padding: var(--spacing-lg);
}

.food-info h3 {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.food-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.food-rating-section {
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.rating-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: var(--spacing-xs);
}

.star {
  font-size: 1.2rem;
  color: #ffd700;
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.5);
}

.rating-text {
  margin-left: var(--spacing-xs);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--secondary-color);
}

.review-count {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.food-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.food-price {
  color: var(--primary-color);
  font-size: 1.2rem;
  font-weight: 700;
}

.merchant {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
}

.section-footer {
  text-align: center;
  margin-top: var(--spacing-xl);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    text-align: center;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 60vh;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .hero-btn {
    min-width: 140px;
    padding: 14px 24px !important;
  }
  
  .section-header h2 {
    font-size: 2rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .hero-stats {
    padding: var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-btn {
    width: 100%;
    max-width: 280px;
  }
}
</style>
